<template>
  <div class="healthScoreScatter">
    <!--头部标题及 周月季年选择-->
    <div class="healthScoreScatterHeader">
      <span class="healthScoreScatterTitle">子系统健康评分散列图</span>
      <div class="periodSelector">
        <div v-for="item in period4Scatter"
              :key="item.id"
              class="onePeriod"
              :class="periodSelected(item.period)"
              @click="changePeriod(item.period)">
          {{item.label}}
        </div>
      </div>
    </div>
    <!--分割线-->
    <el-divider style="margin: 0;"></el-divider>
    <!--散点图-->
    <div id="scoreScatterPic" style="width: 832px; height: 526px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

// todo 年季月周切换，样式调整，根据数据动态变化

export default {
  name: "HealthScoreScatter",
  data() {
    return {
      period4Scatter: [{
        id: 0,
        label: '周',
        period: 7
      }, {
        id: 1,
        label: '月',
        period: 30
      }, {
        id: 2,
        label: '季',
        period: 90
      }, {
        id: 3,
        label: '年',
        period: 365
      }],
      currentPeriod: 7,
      picOption: {
        xAxis: {
          splitNumber: 10,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1C284B'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#1C284B'
            }
          },
          axisLabel: {
            color: '#999'
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#1C284B'
            }
          },
          axisLabel: {
            color: '#999',
            margin: 15
          }
        },
        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ],
            type: 'scatter'
          }
        ]
      }
    }
  },
  methods: {
    changePeriod(period) {
      this.currentPeriod = period;
      // console.log(this.currentPeriod);
    },
    periodSelected: function (period) {
      return {
        currentPeriod: this.currentPeriod === period
      }
    }
  },
  mounted() {
    this.scatterPic = echarts.init(document.getElementById("scoreScatterPic"));
    this.scatterPic.setOption(this.picOption);
  },
  computed: {

  }
}
</script>

<style scoped>
.healthScoreScatterHeader {
  width: 834px;
  height: 62px;
}
.healthScoreScatterTitle {
  width: 200px;
  height: 62px;
  color: #aaa;
  font-size: 20px;
  line-height: 62px;
  margin-left: 26px;
  /*margin-right: 400px;*/
  padding-bottom: 17px;
  border-bottom: 3px solid #0081E2;
}

.periodSelector {
  float: right;
  width: 194px;
  height: 30px;
  background-color: #131E3D;
  border: 1px solid #1D3A7F;
  margin-top: 18px;
  margin-right: 22px;
  border-radius: 1px;
}
.onePeriod {
  float: left;
  color: #aaa;
  width: 25%;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
  padding: 0 17px;
  border: 1px solid #1D3A7F;
}
.onePeriod:hover {
  cursor: pointer;
}
.currentPeriod {
  color: #fff;
  background-color: #1991EB;
  border: 1px solid #1A91EB
}
</style>
